<template>
  <div class="frame">
    <div class="corner lt" />
    <div class="corner lb" />
    <div class="corner rt" />
    <div class="corner rb" />
    <div class="body">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
    name: 'Frame'
}
</script>

<style lang="scss" scoped>
$borderColor: #0fc2ff;
.frame {
  position: relative;
   width: 100%;
  // height: 100%;
  background: #15283b;
  border: 1px solid #476789;
  background-image: radial-gradient(
    rgba(#000811, 0.8) 0%,
    rgba(#001423, 0.8) 50%,
    rgba(#002138, 0.8) 100%
  );
  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
    z-index: 2;
    &.lt {
      top: -1px;
      left: -1px;
      border-left: 1px solid $borderColor;
      border-top: 1px solid $borderColor;
    }
    &.lb {
      bottom: -1px;
      left: -1px;
      border-left: 1px solid $borderColor;
      border-bottom: 1px solid $borderColor;
    }
    &.rt {
      top: -1px;
      right: -1px;
      border-right: 1px solid $borderColor;
      border-top: 1px solid $borderColor;
    }
    &.rb {
      bottom: -1px;
      right: -1px;
      border-right: 1px solid $borderColor;
      border-bottom: 1px solid $borderColor;
    }
  }
  .body {
    width: 100%;

  }
}
</style>
